<template>
    <div class="imgNavDetail">
        <p class="header_detail">预约模块</p>
        <div class="detail">
            <p class="detail_explain_title">设置背景图</p>
            <p class="detail_explain">  · 不设置则为白底；</p>   
            <p class="detail_explain">· 添加图片，建议图片尺寸为750*910像素</p>
        </div>
        <div class="uploadImg">
            <div class="delete" @click='clearImg' v-if='data.bgUrl'></div>
            <el-upload
                class="avatar-uploader"
                action="#"
                :auto-upload="false"
                :show-file-list="false"
                :on-change="getBg"
                :on-remove="handleRemove"
                :http-request="uploadImg"
            >
            <img v-if="data.bgUrl" :src="data.bgUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            <div class="img_loading">
                <p v-if='!data.bgUrl'>添加图片</p> 
            </div>
            </el-upload>
        </div>
        <div class="detail detail_set">
            <p class="form_title">上边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingTop"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
            <p class="form_title">下边框距离  <span>(0为贴合，最大100像素)</span></p>
            <el-slider
                v-model="data.paddingBottom"
                show-input
                :max='100'
                :step="1"
                @change='toParent'>
            </el-slider>
        </div>
         <div  class="eventBus">
            <p class="event_title" >事件（选填）</p>
            <el-input @change='toParent' v-model='data.event' :disabled="data.eventChecked" placeholder="请输入事件ID"></el-input>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            data:{
                
            },
            imgHeight:200,
        }
    },
    props:{
        propData:{
            type:Object
        }
    },
    methods:{
       clearImg(){
            this.data.bgUrl = '';
            this.toParent();
        },
        // 导航 数量
        changeNavList(index,val){
            this.activeNav =index;
            this.imgList=[];
            for(let i=0;i<val;i++){
                this.imgList.push({id:i+1})
            };
            this.toParent();
        },
        uploadImg(){

        },
        handleRemove(){

        },
         // 获取当前点击的upload
        getIndex(index){
            if(this.activeUploadIndex ==index){
                return;
            }
            this.activeUploadIndex = index;
        },
        // 背景图
        getBg(val){
            let that = this;
            let infoId = this.$route.query.id;
            var file = val.raw;
            var formdata=new FormData();// 创建form对象
            formdata.append('file',file,file.name);
            this.$ajax({
                method:'post',
                url:`/base/systemFile/insertCmsPictureAndMp4/${infoId}`,
                data:formdata
            }).then(res=>{
                if(res.data.status==200){
                    that.data.bgUrl= res.data.result.url;
                    that.toParent();
                }
            }).catch(err=>{
                this.$message.error('上传异常，请重试')
            })
        },
        // getImg(val){
        //     let that = this;
        //     let file = val.raw;
        //     var reader = new FileReader();
        //     reader.readAsDataURL(file);
        //     reader.onload =(e)=>{ 
        //         that.imgList[that.activeUploadIndex].imageUrl=e.target.result;
        //         var image = new Image()
        //         image.src = e.target.result
        //         image.onload =function(){
        //             var naturalWidth = image.width;
        //             var naturalHeight = image.height;
        //             if(naturalHeight < naturalWidth){
        //                 that.imgList[that.activeUploadIndex].overHight = true;
        //             }else{
        //                 that.imgList[that.activeUploadIndex].overHight = false;
        //             }
        //             that.toParent();
        //         }
        //     }
        // },
        beforeAvatarUpload(file) {
            const isJPG = file.type === 'image/jpeg';
            const isLt2M = file.size / 1024 / 1024 < 2;

            if (!isJPG) {
            this.$message.error('上传头像图片只能是 JPG 格式!');
            }
            if (!isLt2M) {
            this.$message.error('上传头像图片大小不能超过 2MB!');
            }
            return isJPG && isLt2M;
        },
        toParent() {
            let data = {
                ...this.data
            };
            this.$emit("toParent", data);
        }
    },
    watch:{
        propData:function(val){
           this.data = JSON.parse(JSON.stringify(this.propData)); 
        }
    },
    mounted(){
        this.data = JSON.parse(JSON.stringify(this.propData));
        this.toParent(); 
        console.log(this.propData,'接收到的参数')
        // debugger;
    } 
}
</script>
<style lang="less" scoped>
    .imgNavDetail{
    margin-bottom:40px;
}
.header_detail{
    height:50px;
    line-height:50px;
    // border-bottom:1px solid #E4E4E4;
    font-size: 16px;
    color: #000000;
    padding-left:16px;
}
.detail{
    padding: 0 16px 0 16px;
    border-top: 1px solid #E4E4E4;
    font-size: 14px;
    // color: #666666;
    .nav_box{
        width:100%;
        height:40px;
        position:relative;
        ul{
            width:100%;
            height:100%;
            display:flex;
            justify-content: center;
            align-items: center;
            li{
                display:inline-block;
                width:100/3%;
                height:100%;
                position:relative;
                border:1px solid #E4E4E4;
                box-sizing: border-box;
                display:flex;
                justify-content: center;
                align-items: center;    
            }
            .activeLi{
               border:1px solid #FF8244; 
            }
        }
    }
    .form_title{
        position:relative;
        left:-10px;
        margin:20px 0 16px 0;
        span{
            color: #888888;
        }
    }
    .detail_explain_title{
        font-size: 14px;
        margin:10px 0;
        color: #666666;
    }
    .detail_explain{
        font-size: 12px;
        line-height: 17px;
        color: #888888;
    }
}
.detail_set{
    padding: 0 16px 0 25px;
}
.detail_content{
    width:100%;
    margin-bottom:10px;
    ul{
        width:100%;
        height:100%;
        margin-top: 20px;
    }
    li{
        width:100%;
        margin-top: 2px;
        background:#F7F7F7;
    }
    .imgBox{
        width:100%;
        height:100%;
        display:flex;
        justify-content: space-between;
        align-items: center;
        position:relative;
        .jumpUrlBox{
            font-size:14px;
            line-height:24px;
            margin-right:16px;
        }
        .left{
            width:150px;
            height:90px;
            display:flex;
            justify-content: center;
            align-items: center;
            .left_btns{
                width:50px;
                height:100%;
                flex-direction: column;
                display: flex;
                align-items: center;
                justify-content: center;
                .top_btn{
                    margin-bottom:10px;
                }
            }
            .left_imgs{
                width:72px;
                height:62px;
                position:relative;
                .img_loading{
                    width:100%;
                    height:100%;
                    position:absolute;
                    background:rgba(0, 0, 0, 0.6);
                    top: 0;
                    font-size: 12px;
                    color: #FFFFFF;
                    display:none;
                    justify-content: center;
                    align-items:center;
                }
                .el-upload:hover .img_loading{
                    display:flex; 
                }   
                .upload_text{
                    font-size: 12px;
                    line-height: 17px;
                }
            }
        }
        .center{
            width:250px;
            height:100px;
        }
        .right{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .right:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
    }
    .addBtns{
        width:calc(100% - 32px);
        margin-left: 16px;
        text-align:center;
        line-height:40px;
        border:1px solid #FF8244;
        box-sizing: border-box;
        color:#FF8244;
        font-size: 14px;
        margin-top: 10px;
        margin-bottom:20px;
        cursor: pointer;
    }
}
/deep/.el-form-item {
    height: auto;
    display: block;
}
/deep/.el-form-item__content{
    height:auto;
}
 .uploadImg{
        width:100%;
        min-height:132px;
        height:auto;     
        position:relative;
        padding:24px 16px 17px 16px;
        margin-top:16px;
        box-sizing: border-box;
        background:#F7F7F7;
        line-height:35px;
        font-size:14px;
        color:#666666;
        margin-bottom:20px;
        .delete{
            width:14px;
            height:14px;
            position:absolute;
            top: 8px;
            right:6px;
            z-index: 10;
            background:url('~@/assets/img/editContent/icon-ashbin-nor.png') center center/14px 14px  no-repeat;
        }
        .delete:hover{
            background:url('~@/assets/img/editContent/icon-ashbin-hov.png') center center/14px 14px  no-repeat;                    
        }
         /deep/ .avatar-uploader .el-upload {
            border: 1px dashed #FF8244;
            box-sizing: border-box;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
            width:100%;
            height:auto;  
            min-height:84px;   
            display:flex;
            justify-content: center;
            align-items:center;
            flex-direction: column;
            color:#FF8244;
        }
        /deep/ .avatar-uploader .el-upload:hover {
            // border-color: #FF8244;
        }
        /deep/.avatar-uploader-icon {
            font-size: 22px;  
            color:#FF8244;
        }
        /deep/.avatar {
            width:100%;
            height:auto;
            display: block;
        }
    }   
    /deep/.el-slider__bar{
        background-color:#FF8244;
    }
    /deep/.el-slider__button{
        border: 2px solid #FF8244;
    }
    .eventBus{
        font-size: 14px;
        padding:5px 16px 0 16px;
        line-height: 40px;
        .event_title{
        //    margin-bottom:10px;
        }
    }
</style>